<template>
  <div class="personnel-emission">
    <el-row>
      <el-col :span="20">
        <h3>{{ usagePhase.replace("阶段", "") }}人员产生的碳排放</h3>
      </el-col>
      <el-col :span="4">
        <el-button size="small" type="primary" @click="edit" icon="el-icon-check">保存修改</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="6">
        <div class="input-group">
          <span class="label">{{ usagePhase.replace("阶段", "") }}人员总数</span>
          <el-input-number
            v-model="formData.totalPersonnel"
            size="small"
            :min="0"
            :controls="false"
            placeholder="请输入"
          />
        </div>
      </el-col>

      <el-col :span="6">
        <div class="input-group">
          <span class="label">人员工作天数</span>
          <el-input-number
            v-model="formData.workDays"
            size="small"
            :min="0"
            :controls="false"
            placeholder="请输入"
          />
        </div>
      </el-col>

      <el-col :span="6">
        <div class="input-group">
          <span class="label">单位人员单位天数碳排放因子</span>
          <el-input-number
            v-model="formData.emissionFactor"
            size="small"
            :min="0"
            :precision="2"
            :controls="false"
            placeholder="请输入"
          />
        </div>
      </el-col>

      <el-col :span="6">
        <div class="input-group">
          <span class="label">人员碳排放量</span>
          <el-input
            :value="totalEmission"
            size="small"
            disabled
            placeholder="计算结果"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { updatePersionEmission } from "@/api/business/persionEmission"

export default {
  props: {
    personnelData: {
      type: Object,
      default: () => ({
        personnelId: 0,
        totalPersonnel: 0,
        workDays: 0,
        emissionFactor: 0,
        engineeringId: 0
      })
    },
    engineeringId: {
      required: false,
      type: Number
    },
    usagePhase: {
      type: String,
      default: ""
    },
  },

  data() {
    return {
      formData: { ...this.personnelData }
    }
  },

  computed: {
    totalEmission() {
      const { totalPersonnel, workDays, emissionFactor } = this.formData;
      return (totalPersonnel * workDays * emissionFactor).toFixed(2);
    }
  },

  watch: {
    personnelData: {
      deep: true,
      handler(newVal) {
        this.formData = { ...newVal };
      }
    },
  },

  methods: {
    edit() {
      this.formData.personnelId = this.personnelData.personnelId
      this.formData['usagePhase'] = this.usagePhase
      this.formData['engineeringId'] = this.engineeringId
      updatePersionEmission(this.formData.personnelId, this.formData).then((res) => {
        this.formData.personnelData = res.data
        this.$emit("updatePersonnelData", this.formData)
        this.$modal.msgSuccess("修改成功")
      })
    }
  }
}
</script>

<style scoped>
.personnel-emission {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h3 {
  margin-bottom: 20px;
}

.input-group {
  display: flex;
  flex-direction: column;
}

.label {
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
}
</style>
